<template>
  <a-drawer
    :visible="formVisible"
    :width="500"
    unmount-on-close
    :title="isEdit ? '编辑' : '新增用户'"
    @ok="submit"
    @cancel="handleCancel"
  >

  

      <a-form
        ref="formRef"
        :model="form"
        :label-col-props="{ span: 8 }"
        :wrapper-col-props="{ span: 16 }"
      >
        <a-form-item
          field="username"
          label="用户名"
          :rules="[
            { required: true, message: '请输入用户名' },
            { minLength: 2, message: '长度在2个字符以上' },
          ]"
        >
          <a-input v-model="form.username" placeholder="请填写用户名" @change="changeUsername" />
        </a-form-item>
        <a-form-item
          field="phone"
          label="手机号"
          :rules="[
            { required: true, message: '请输入手机号' },
            { length: 11, message: '请输入11位手机号' },
          ]"
        >
          <a-input v-model="form.phone" placeholder="请填写手机号" />
        </a-form-item>
        <a-form-item
          field="password"
          label="密码"
          v-if="!isEdit"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input v-model="form.password" placeholder="请填写密码" @change ='changePassword'/>
        </a-form-item>
        <a-form-item
          field="repassword"
          label="确认密码"
          v-if="!isEdit"
          :rules="editRules('确认密码')"
         
        >
          <a-input v-model="form.repassword" placeholder="请填写确认密码" @change='changeNewPassword' />
        </a-form-item>

        <a-form-item label="选择权限"   :rules="[{ required: true}]">
          <a-select
            :options="props.options"
            :field-names="props.optionFieldNames"
            @change="changeInfo"
          />
        </a-form-item>
      </a-form>

  </a-drawer>
</template>

<script lang="ts" setup>
  import { FieldRule, Message } from '@arco-design/web-vue';
  import { ref, watch, computed, defineProps } from 'vue';
  import { addUserInfo,addUser } from '@/api/system';
import { IconPhone } from '@arco-design/web-vue/es/icon';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    selected: {
      type: String,
      default: '6',
    },
    refreshList: {
      type: Boolean,
      default: false,
    },

    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    fetchData: {
      type: Function,
      default: () => {
        return {};
      },
    },
    options: Array,
    optionFieldNames: {
      type: Object,
    },
  });

  console.log(props.fetchData());

  const formRef = ref(); //声明才能绑定，  ref="formRef"相当于一个标识可以调用或者检验form的内容

  // 初始数据
  const initData = () => {
    return {
      name: 'eeeeeeee',
    };
  };
  /**
   * 菜单数据
   */
  const form = ref<any>(props.formData);
  // console.log(form);
  const selected = ref(props.selected);
  // console.log(selected);

  const emit = defineEmits<{
    (e: 'update:visible', v: boolean): void;
    (e: 'refresh'): void;
  }>();
  const formVisible = ref(false);

  // 判断是编辑还是新增
  // console.log(form.value.id);
  const isEdit = computed(() => !!form.value.id);
  // console.log(isEdit);

  const editRules = (label: string) => {
    return [
      {
        validator: (value: string, cb: any) => {
          // console.log('123')
          // console.log(cb)
          // console.log(form.value.password)
          if (!value) {
            cb(`${label}不能为空`);
          }
          if (value != form.value.password) {
            cb(`${label}密码不一致`);
          }
        },
      },
    ];
  };

  const submit = async () => {
    formVisible.value = true;
    console.log(form);
    
  const userInfo = {
    position_id:es.value,
    username:form.value.username ,
    password:form.value.password,
    repassword:form.value.repassword,
    phone:form.value.phone
  }
 



   
    addUser(userInfo).then(res=>{
      console.log(res);
      Message.success('添加用户成功')
      props.fetchData()
      formVisible.value = false;
    })


    // const validate = await formRef.value.validate();
    // // console.log(formRef.value);
    // // console.log(validate);

    // if (!validate) {
    //   // console.log(isEdit.value);
    //   if (isEdit.value) {
    //     // console.log(form.value);
    //     Message.success('修改成功');
    //     props.fetchData();
    //   } else {
    //     // console.log(form.value);
    //     await addUserInfo(form.value).then(() => {
    //       Message.success('添加成功');
    //       props.fetchData();
    //     });
    //   }
    
    //   form.value = { ...initData };

    //   formVisible.value = false;
    //   emit('refresh');
    // }
  };

  const handleCancel = () => {
    formVisible.value = false;
    // form.value = { ...initData };
  };

  watch(
    () => formVisible.value,
    (val) => {
      emit('update:visible', val);
    }
  );

  watch(
    () => props.visible,
    (val) => {
      formVisible.value = val;
    }
  );

  watch(
    () => props.formData,
    (val) => {
      form.value = val;
    }
  );



  const es = ref()
  const changeInfo = (e) => {
    es.value = e
    console.log(es.value);
  };

  const changeUsername = (e)=>{
   console.log(e);
   
  }
  const changePassword = (e)=>{
    console.log(e);
  }
  const changeNewPassword = (e)=>{
    console.log(e);
  }
</script>
